<template>
	<div>
		<el-dialog :title="$t('xuan-ze-jiao-se')" v-model="isUseDialog" draggable :close-on-click-modal="false"
			width="769px" @close="cancelUseClick" :destroy-on-close="true">
			<div style="box-sizing: border-box">
				<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
					<el-form class="box-f" ref="ruleFormRef" :inline="true">
						<el-form-item :label="$t('jiao-se-ming')">
							<el-input v-model="roleName" style="width: 120px"
								:placeholder="$t('qing-shu-ru-jiao-se-xing-ming')" />
						</el-form-item>
						<el-form-item :label="$t('wei-yi-bian-ma')">
							<el-input v-model="roleCode" style="width: 120px"
								:placeholder="$t('qing-shu-ru-wei-yi-bian-ma')" />
						</el-form-item>
						<el-form-item style="margin-right: 0">
							<el-button @click="searchList" type="primary" icon="ele-Search"> {{ $t('sou-suo') }}
							</el-button>
							<el-button @click="resetClick" icon="ele-Refresh"> {{ $t('u2lRbgkoIgj4s70umsVDz') }}
							</el-button>
						</el-form-item>
					</el-form>
				</el-card>
			</div>
			<div style="box-sizing: border-box; margin-top: 8px" class="flex-1 pos-r">
				<el-card class="box-card w-h-100" shadow="hover">
					<div style="" class="w-h-100 ver-flex">
						<div class="flex-1 pos-r">
							<el-table @select-all="getSelectionRowsList" @select="getSelectionRowsList" :data="list"
								class="w-h-100" style="width: 100%" border element-loading-background="rgba(0, 0, 0, 0.5)">
								<el-table-column type="selection" width="55" align="center" />
								<el-table-column prop="name" :label="$t('jiao-se-ming-0')" align="center" />
								<el-table-column prop="code" :label="$t('wei-yi-bian-ma-0')" align="center" />
								<el-table-column prop="sort" :label="$t('pai-xu')" align="center" />
							</el-table>
						</div>
						<div style="height: 30px; margin-top: 20px" class="hr-flex-start">
							<el-pagination v-model:currentPage="pageNo" v-model:page-size="pageSize" :total="totalRows"
								:page-sizes="[10, 20, 50, 100]" small background @size-change="handleSizeChange"
								@current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper"
								class="w-h-100" />
						</div>
					</div>
				</el-card>
			</div>
			<template #footer>
				<el-button @click="cancelUseClick">{{ $t('qu-xiao') }}</el-button>
				<el-button type="primary" @click="submitForm">{{ $t('que-ding') }}</el-button>
			</template>
		</el-dialog>
	</div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, computed } from 'vue';
// import { FormInstance } from "element-plus";
import {
	getSysRolePage, //获取角色
} from '/@/api/workFlow/index';
import getTableData from '/@/utils/getTableData';

export default defineComponent({
	name: 'add-edit-not-received',
	components: {},
	props: {
		isUseDialog: {
			type: Boolean,
			default: false,
		},
		repairInfo: {
			type: String,
			default: '',
		},
	},
	setup(props, ctx) {
		const ruleFormRef = ref();
		const searchObj = reactive({});
		const roleName = ref('');
		const roleCode = ref('');

		let tableDataObj = getTableData(getSysRolePage, {}, searchObj);
		//  重置按钮
		const resetClick = () => {
			roleName.value = '';
			roleCode.value = '';
			Object.assign(searchObj, { name: '' });
			Object.assign(searchObj, { code: '' });
		};
		const selectUser = ref<any>({});
		const getSelectionRowsList = (val: any) => {
			console.log(val);
			selectUser.value = val;
		};

		const searchList = () => {
			if (roleName.value !== undefined) {
				Object.assign(searchObj, { name: roleName.value });
			} // 类名
			if (roleCode.value !== undefined) {
				Object.assign(searchObj, { code: roleCode.value });
			} // 类名

			tableDataObj.getData();
		};

		/*** handleClose 关闭按钮点击事件 */
		const handleClose = () => {
			ctx.emit('cancelUseClicks');
		};

		/*** cancelUseClick 取消事件 */
		const cancelUseClick = () => {
			ctx.emit('cancelUseClicks');
		};

		//    提交事件
		const submitForm = () => {
			// nodeDesignateData
			console.log(selectUser.value);
			ctx.emit('roleLists', { titleCon: selectUser.value });
			ctx.emit('cancelUseClicks');
		};

		/*** 监听isUseDialog的变化 */
		// watch(
		//   () => props.isUseDialog,
		//   (newVal) => {
		//     if (newVal) {
		//       if (props.repairInfo !== "") {
		//         console.log(123);
		//       }
		//     }
		//   }
		// );

		/*** isUseDialog 响应弹窗的关闭  */
		const isUseDialog = computed(() => {
			return props.isUseDialog;
		});

		return {
			handleClose,
			submitForm,
			cancelUseClick,
			isUseDialog,
			...tableDataObj,
			resetClick,
			ruleFormRef,
			getSelectionRowsList,
			searchList,
			roleName,
			roleCode,
		};
	},
});
</script>
<style scoped lang="scss">
#orgRole2 {
	:deep(.el-card__body) {
		height: 100%;
	}

	.box-f {
		:deep(.el-form-item__label) {
			// padding: 0;
		}
	}

	ul {
		list-style: none;

		li {
			cursor: pointer;

			&:hover {
				color: red;
			}
		}
	}

	.tree-s {
		// height: calc(100vh - 157px);
		height: calc(100vh - 100px);
		overflow-y: auto;
	}

	.h-sty {
		height: 100%;
		overflow: auto;
	}

	.icon-e {
		:deep(.el-icon) {
			margin-right: 0px !important;
		}
	}
}
</style>
